{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}
用户注册
{% endblock %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/account.css' %}">
<style>
    .error-msg {
        color: red;
        position: absolute;
        font-size: 13px;
    }

    .form-group {
        text-align: left; /* 或者不设置，取决于其他样式 */
    }

    .form-group label {
        font-size: 16px; /* 设置字体大小为16px */
        text-align: left; /* 或者使用 right;  */
    }
</style>
{% endblock %}
{% block content %}
<div class="account">
    <div class="title">用户注册</div>
    <form id="regForm" method="POST" novalidate>
        {% csrf_token %}
        {% for field in form %}
        {% if field.name == 'code' %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            <div class="row">
                <div class="col-xs-7">
                    {{ field }}
                    <span class="error-msg"></span>
                </div>
                <div class="col-xs-5">
                    <input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码">
                </div>
            </div>
        </div>
        {% else %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            <span class="error-msg"></span>
        </div>
        {% endif %}
        {% endfor %}

        <div class="row">
            <div class="col-xs-3">
                <input id="btnSubmit" type="button" class="btn btn-primary" value="注  册"/>
            </div>
        </div>
    </form>
</div>
{% endblock %}
{% block js %}
<script>
    $(function () {
        bindClickSubmit();
        bindClickBtnSms();
        console.log("hello wiwl");
    });

    function bindClickSubmit() {
        $("#btnSubmit").click(function () {
            $('.error-msg').empty();
            //收集到表单中的数据（找到每一个字段）   $('#reForm').serialize()
            //数据ajax发送请求到后台
            $.ajax({
                url: "{% url 'register' %}",
                type: "POST",
                data: $('#regForm').serialize(),//所有字段数据 - csrf token
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        //var currentUrl = window.location.href;
                        //var newUrl = currentUrl + res.data;
                        location.href = res.data; // 直接跳转到  res.data 的页面
                    } else {
                        $.each(res.error, function (key, value) {
                            {
                                $('#id_' + key).next().text(value[0]);
                            }
                            $("#id_" + key).next().text(value[0]);
                        })
                    }
                }
            })
        })
    }

    /*
    点击获取验证码的按钮绑定事件
     */
    function bindClickBtnSms() {
        $('#btnSms').click(function () {
            // 获取用户输入的手机号
            // 找到输入框的ID，根据ID获取值，如何找到手机号的那个ID？
            var mobilePhone = $('#id_mobile_phone').val();
            //发送ajax 请求，把手机号发送过去
            $.ajax({
                url: "{% url 'send_sms' %}",
                type: "GET",
                data: {mobile_phone: mobilePhone, tpl: 'register'},
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        console.log(res)
                        // alert('短信验证码功能暂时无法使用，此次验证码为：',res.form.code)
                        // 设置一个定时器，3秒后触发 alert
                        sendSmsRemind();
                        setTimeout(function () {
                            alert('短信验证码功能暂时无法使用，此次验证码为：' + res.form.code);
                        }, 3000);

                    } else {
                        $.each(res.error, function (key, value) {
                            $("#id_" + key).next().text(value[0]);
                        })
                    }
                }
            })
        });
    }

    /*
    倒计时
     */

    function sendSmsRemind() {
            var $smsBtn = $('#btnSms');
            $smsBtn.prop('disabled', true); // 禁用
            var time = 60;
            var remind = setInterval(function () {
                $smsBtn.val(time + '秒重新发送');
                time = time - 1;
                if (time < 1) {
                    clearInterval(remind);
                    $smsBtn.val('点击获取验证码').prop('disabled', false);
                }
            }, 1000)
        }

</script>

{% endblock %}